<template>
  <el-dialog :model-value="props.visible" :title="props.title" width="1000px" align-center destroy-on-close @close="handleClose">
    <div class="grille-container">
      <!-- 目录 -->
      <cascader-catalog v-model:category-id="query.categoryId" :category-type="4" @refresh="handlePage" />
      <div class="main-container dialog-container">
        <el-form :model="query" inline label-width="80px">
          <el-form-item>
            <el-button v-permission="'paper:save'" type="primary" @click="toPaperAdd()">添加试卷</el-button>
          </el-form-item>
          <el-form-item>
            <el-input v-model="query.paperName" placeholder="请输入试卷名称" prefix-icon="Search" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery()"> 查询</el-button>
            <el-button @click="resetQuery()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="page.loading" :data="page.list" row-key="id">
          <el-table-column :min-width="100" label="试卷名称" prop="paperName">
            <template #default="scope">
              <el-button link type="primary" @click="toPaperPreview(scope.row)">{{ scope.row.paperName }}</el-button>
              <div style="margin-top: 10px">
                <span>【随机组卷：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.randomCombine" />】</span>
                <span>【题目乱序：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.questionDerangement" />】</span>
                <span>【选项乱序：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.optionDerangement" />】</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :min-width="20" label="题量" prop="questionCount"></el-table-column>
          <el-table-column :min-width="20" label="总分" prop="totalScore"></el-table-column>
          <el-table-column :width="100" fixed="right" label="操作" prop="address">
            <template #default="scope">
              <el-button link type="primary" @click="selectPaper(scope.row)"> 选择 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <common-pagination v-model:page="page" @pagination="handlePage" />
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="handleSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import useTable from '@/utils/table'
  import { questionApi } from '@/api/question'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import CascaderCatalog from '@/components/Cascader/Catalog/index.vue'
  import { useRouter } from 'vue-router'
  import { selectSwitch } from '@/utils/constants.js'
  import EnumView from '@/components/Enum/View/index.vue'
  const router = useRouter()

  const props = defineProps({
    title: {
      type: String,
      default: '选择试卷'
    },
    visible: {
      type: Boolean,
      default: false
    }
  })

  // 预览试卷
  const toPaperPreview = (item) => {
    const pathRouter = router.resolve({ path: '/paper/preview', query: { paperId: item.id } })
    window.open(pathRouter.href, '_blank')
  }

  // 添加试卷
  const toPaperAdd = () => {
    const pathRouter = router.resolve({ path: '/exam/paper' })
    window.open(pathRouter.href, '_blank')
  }

  const emit = defineEmits(['close'])
  // 选择
  const selectPaper = (item) => {
    emit('close', item)
  }
  // 确定
  const handleSubmit = () => {
    emit('close')
  }
  // 关闭
  const handleClose = () => {
    emit('close')
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery } = useTable({
    page: questionApi.paperPage
  })
</script>
